<div class="toaster-container">
  <ul class="toaster">
    <li ng-repeat="notif in list" kbn-toast notif="notif">
      <div class="toast alert" ng-class="'alert-' + notif.type">

        <span ng-show="notif.count > 1" class="badge">{{ notif.count }}</span>

        <i class="fa" ng-class="'fa-' + notif.icon" tooltip="{{notif.title}}"></i>

        <kbn-truncated ng-if="notif.content" source="{{notif.content}}" length="250" class="toast-message" /></kbn-truncated>

        <kbn-truncated ng-if="notif.markdown" source="{{notif.markdown | markdown}}" is-html="true" length="250" class="toast-message" /></kbn-truncated>

        <div class="btn-group pull-right toast-controls">
          <button
            type="button"
            ng-if="notif.isTimed()"
            class="btn toaster-countdown"
            ng-class="'btn-' + notif.type"
            ng-click="notif.cancelTimer()"

            ><span class="badge" hover-text="stop">{{notif.timeRemaining}}s</span></button>
          <button
            type="button"
            ng-if="notif.stack && !notif.showStack"
            class="btn"
            ng-class="'btn-' + notif.type"
            ng-click="notif.cancelTimer(); notif.showStack = true"
            >More Info</button>
          <button
            type="button"
            ng-if="notif.stack && notif.showStack"
            class="btn"
            ng-class="'btn-' + notif.type"
            ng-click="notif.showStack = false"
            >Less Info</button>
          <button
            type="button"
            ng-if="notif.accept"
            class="btn"
            ng-class="'btn-' + notif.type"
            ng-click="notif.accept()"
            >OK</button>
          <button
            type="button"
            ng-if="notif.address"
            class="btn"
            ng-class="'btn-' + notif.type"
            ng-click="notif.address()"
            >Fix it</button>
        </div>
      </div>

      <div ng-if="notif.stack && notif.showStack" class="toast-stack alert" ng-class="'alert-' + notif.type">
        <pre ng-repeat="stack in notif.stacks" ng-bind="stack"></pre>
      </div>

    </li>
  </ul>
</div>
